<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Typography | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Typography | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Typography</h1>
          <ul class="docs-index"></ul>
          <p>Framework7 comes with a lot of additional CSS helper classes to help you with extra styling and formatting.</p>
          <h2>Content Spacing</h2>
          <h3>Margin</h3>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Margin</th>
              </tr>
              <tr>
                <td>margin</td>
                <td>Applies margin to all sides</td>
              </tr>
              <tr>
                <td>margin-left</td>
                <td>Applies margin to the left</td>
              </tr>
              <tr>
                <td>margin-right</td>
                <td>Applies margin to the right</td>
              </tr>
              <tr>
                <td>margin-top</td>
                <td>Applies margin to the top</td>
              </tr>
              <tr>
                <td>margin-bottom</td>
                <td>Applies margin to the bottom</td>
              </tr>
              <tr>
                <td>margin-horizontal</td>
                <td>Applies margin to the left and right</td>
              </tr>
              <tr>
                <td>margin-vertical</td>
                <td>Applies margin to the top and bottom</td>
              </tr>
              <tr>
                <td>no-margin</td>
                <td>Removes margin</td>
              </tr>
              <tr>
                <td>no-margin-left</td>
                <td>Removes left margin</td>
              </tr>
              <tr>
                <td>no-margin-right</td>
                <td>Removes right margin</td>
              </tr>
              <tr>
                <td>no-margin-top</td>
                <td>Removes left margin</td>
              </tr>
              <tr>
                <td>no-margin-bottom</td>
                <td>Removes bottom margin</td>
              </tr>
            </tbody>
          </table>
          <p>For example:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>margin-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text with left margin<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>margin-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text with right margin<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre></code>
          <h3>Padding</h3>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Padding</th>
              </tr>
              <tr>
                <td>padding</td>
                <td>Applies padding to all sides</td>
              </tr>
              <tr>
                <td>padding-left</td>
                <td>Applies padding to the left</td>
              </tr>
              <tr>
                <td>padding-right</td>
                <td>Applies padding to the right</td>
              </tr>
              <tr>
                <td>padding-top</td>
                <td>Applies padding to the top</td>
              </tr>
              <tr>
                <td>padding-bottom</td>
                <td>Applies padding to the bottom</td>
              </tr>
              <tr>
                <td>padding-horizontal</td>
                <td>Applies padding to the left and right</td>
              </tr>
              <tr>
                <td>padding-vertical</td>
                <td>Applies padding to the top and bottom</td>
              </tr>
              <tr>
                <td>no-padding</td>
                <td>Removes padding</td>
              </tr>
              <tr>
                <td>no-padding-left</td>
                <td>Removes left padding</td>
              </tr>
              <tr>
                <td>no-padding-right</td>
                <td>Removes right padding</td>
              </tr>
              <tr>
                <td>no-padding-top</td>
                <td>Removes left padding</td>
              </tr>
              <tr>
                <td>no-padding-bottom</td>
                <td>Removes bottom padding</td>
              </tr>
            </tbody>
          </table>
          <p>For example:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>padding-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text with left padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>padding-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text with right padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</pre></code>
          <h2>Float Elements</h2>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>float-left</td>
                <td>The element will float on the left side of its containing block</td>
              </tr>
              <tr>
                <td>float-right</td>
                <td>The element will float on the right side of its containing block</td>
              </tr>
              <tr>
                <td>float-none</td>
                <td>Disable floating</td>
              </tr>
            </tbody>
          </table>
          <p>For example</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>float-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>float-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
          <h2>Text Alignment</h2>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>text-align-left</td>
                <td>The inline contents are aligned to the left edge of the line box</td>
              </tr>
              <tr>
                <td>text-align-right</td>
                <td>The inline contents are aligned to the right edge of the line box</td>
              </tr>
              <tr>
                <td>text-align-center</td>
                <td>The inline contents are centered within the line box</td>
              </tr>
              <tr>
                <td>text-align-justify</td>
                <td>The inline contents are justified</td>
              </tr>
            </tbody>
          </table>
          <p>For example:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-align-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Center aligned text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-align-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right aligned text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</pre></code>
          <h2>Element Display</h2>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>display-block</td>
                <td>Element will be displayed as block element</td>
              </tr>
              <tr>
                <td>display-inline</td>
                <td>Element will be displayed as inline element</td>
              </tr>
              <tr>
                <td>display-inline-block</td>
                <td>Element will be displayed as inline block element</td>
              </tr>
              <tr>
                <td>display-flex</td>
                <td>Element will be displayed as flex element</td>
              </tr>
              <tr>
                <td>display-inline-flex</td>
                <td>Element will be displayed as inline flex element</td>
              </tr>
              <tr>
                <td>display-none</td>
                <td>Element will be hidden</td>
              </tr>
            </tbody>
          </table>
          <p>For example:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-flex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>World!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
          <h2>Flexbox</h2>
          <p>There are several helper classes to control flex model:</p>
          <h3>Justify Content</h3>
          <p>The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>justify-content-flex-start</td>
                <td>Pack flex items from the start</td>
              </tr>
              <tr>
                <td>justify-content-center</td>
                <td>Pack items around the center</td>
              </tr>
              <tr>
                <td>justify-content-flex-end</td>
                <td>Pack flex items from the end</td>
              </tr>
              <tr>
                <td>justify-content-space-between</td>
                <td>Distribute items evenly. The first item is flush with the start, the last is flush with the end</td>
              </tr>
              <tr>
                <td>justify-content-space-around</td>
                <td>Distribute items evenly. Items have a half-size space on either end</td>
              </tr>
              <tr>
                <td>justify-content-space-evenly</td>
                <td>Distribute items evenly. Items have equal space around them</td>
              </tr>
              <tr>
                <td>justify-content-stretch</td>
                <td>Distribute items evenly. Stretch 'auto'-sized items to fit the container</td>
              </tr>
              <tr>
                <td>justify-content-start</td>
                <td>Pack items from the start</td>
              </tr>
              <tr>
                <td>justify-content-end</td>
                <td>Pack items from the end</td>
              </tr>
              <tr>
                <td>justify-content-left</td>
                <td>Pack items from the left</td>
              </tr>
              <tr>
                <td>justify-content-right</td>
                <td>Pack items from the right</td>
              </tr>
            </tbody>
          </table>
          <h3>Align Content</h3>
          <p>The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>align-content-flex-start</td>
                <td>Pack flex items from the start</td>
              </tr>
              <tr>
                <td>align-content-flex-end</td>
                <td>Pack flex items from the end</td>
              </tr>
              <tr>
                <td>align-content-center</td>
                <td>Pack items around the center</td>
              </tr>
              <tr>
                <td>align-content-space-between</td>
                <td>Distribute items evenly. The first item is flush with the start, the last is flush with the end</td>
              </tr>
              <tr>
                <td>align-content-space-around</td>
                <td>Distribute items evenly. Items have a half-size space on either end</td>
              </tr>
              <tr>
                <td>align-content-stretch</td>
                <td>Distribute items evenly. Stretch 'auto'-sized items to fit the container</td>
              </tr>
            </tbody>
          </table>
          <h3>Align Items</h3>
          <p>The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>align-items-flex-start</td>
                <td>Pack flex items from the start</td>
              </tr>
              <tr>
                <td>align-items-flex-end</td>
                <td>Pack flex items from the end</td>
              </tr>
              <tr>
                <td>align-items-center</td>
                <td>Pack items around the center</td>
              </tr>
              <tr>
                <td>align-items-stretch</td>
                <td>Distribute items evenly. Stretch 'auto'-sized items to fit the container</td>
              </tr>
            </tbody>
          </table>
          <h3>Align Self</h3>
          <p>The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the item's cross-axis margin is set to auto, then align-self is ignored.</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>align-self-flex-start</td>
                <td>Put the flex item at the start</td>
              </tr>
              <tr>
                <td>align-self-flex-end</td>
                <td>Put the flex item at the end</td>
              </tr>
              <tr>
                <td>align-self-center</td>
                <td>Put the item around the center</td>
              </tr>
              <tr>
                <td>align-self-stretch</td>
                <td>Stretch 'auto'-sized items to fit the container</td>
              </tr>
            </tbody>
          </table>
          <h3>Flex Shrink</h3>
          <p>The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>flex-shrink-0</td>
                <td>Sets CSS property <code>flex-shrink: 0</code></td>
              </tr>
              <tr>
                <td>flex-shrink-1</td>
                <td>Sets CSS property <code>flex-shrink: 1</code></td>
              </tr>
              <tr>
                <td>flex-shrink-2</td>
                <td>Sets CSS property <code>flex-shrink: 2</code></td>
              </tr>
              <tr>
                <td>flex-shrink-3</td>
                <td>Sets CSS property <code>flex-shrink: 3</code></td>
              </tr>
              <tr>
                <td>flex-shrink-4</td>
                <td>Sets CSS property <code>flex-shrink: 4</code></td>
              </tr>
              <tr>
                <td>flex-shrink-5</td>
                <td>Sets CSS property <code>flex-shrink: 5</code></td>
              </tr>
              <tr>
                <td>flex-shrink-6</td>
                <td>Sets CSS property <code>flex-shrink: 6</code></td>
              </tr>
              <tr>
                <td>flex-shrink-7</td>
                <td>Sets CSS property <code>flex-shrink: 7</code></td>
              </tr>
              <tr>
                <td>flex-shrink-8</td>
                <td>Sets CSS property <code>flex-shrink: 8</code></td>
              </tr>
              <tr>
                <td>flex-shrink-9</td>
                <td>Sets CSS property <code>flex-shrink: 9</code></td>
              </tr>
              <tr>
                <td>flex-shrink-10</td>
                <td>Sets CSS property <code>flex-shrink: 10</code></td>
              </tr>
            </tbody>
          </table>
          <p>For example:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-flex justify-content-space-between align-items-flex-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-shrink-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>align-self-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>align-self-flex-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>